<template>
    <div>
        <div class="big_box">
            <el-form class="demo-form-inline" label-width="140px">
                <el-row :gutter="24" class="row-bg">
                    <el-col :span="3">
                        <el-input placeholder="请输入角色名称" clearable v-model="txtname"></el-input>
                    </el-col>
                    <el-col :span="1.5" style="text-align:left">
                        <el-button icon="el-icon-search" size="medium" @click="GettableData()">搜索</el-button>
                    </el-col>
                    <el-col :span="1.5" style="text-align:right">
                        <el-button icon="el-icon-circle-plus-outline" type="warning" size="medium" style="width:130px" @click=" btnAddDepartment()">添加角色</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-row>
                <el-col :span="24">
                    <el-table :data="tableData" border stripe style="width: 50%;float:left">
                        <el-table-column fixed type="index" label="序号" width="50" align="center"></el-table-column>
                        <el-table-column fixed prop="RoleName" label="角色" align="center" show-overflow-tooltip width="120"></el-table-column>
                        <el-table-column prop="RoleNumber" label="功能权限" show-overflow-tooltip align="center">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="320" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.RoleNumber==('Admin')">
                                    <el-button type="warning" disabled size="mini">修改角色</el-button>
                                    <el-button type="info" disabled size="mini">删除角色</el-button>
                                    <el-button type="success" disabled size="mini">调整功能权限</el-button>
                                </div>
                                <div v-else>
                                    <el-button type="warning" size="mini" @click="Update_RoleName(scope.row)">修改角色</el-button>
                                    <el-button type="info" size="mini" @click="Delete_RoleName(scope.row)">删除角色</el-button>
                                    <el-button type="success" size="mini" @click="GetDataPermissions(scope.row)">调整功能权限</el-button>
                                </div>

                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="width:47%;height:auto;display:inline-block;margin-left:20px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)  ">
                        <div>
                            <el-input
                                      style="width:90%"
                                      placeholder="输入关键字进行过滤"
                                      v-model="filterText">
                            </el-input>
                            <el-button style="width:10%"  type="success" size="medium"  @click="getCheckedKeys" >保存</el-button>
                            <el-tree
                                     style="margin-bottom:20px" :data="treeData" class="mgt20"
                                     show-checkbox
                                     default-expand-all
                                     node-key="Roid"
                                     ref="tree"
                                     highlight-current
                                     :check-strictly = false
                                     :props="defaultProps"
                                     :filter-node-method="filterNode">

                            </el-tree>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-dialog :visible.sync="AddAuditRuleShow" title="添加审批规则" width="40%">
            <el-form label-width="80px" ref="AddAuditRuleDBref">
                <el-row>
                    <el-col :offset="2" :span="15">
                        <el-form-item label="角色名称" prop="AuditUserId2">
                            <el-input placeholder="角色名称" clearable width="80%" v-model="AddRuleName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-button icon="el-icon-search" type="warning" size="medium" style="width:100px;margin-left:20px" @click="GetAddAuditRuleDetail()">添加角色</el-button>
                </el-row>
            </el-form>
        </el-dialog>

        <el-dialog :visible.sync="UpAuditRuleShow" title="修改审批规则" width="40%">
            <el-form label-width="80px" ref="UpAuditRuleDBref">
                <el-row>
                    <el-col :offset="2" :span="15">
                        <el-form-item label="角色名称" prop="AuditUserId2">
                            <el-input placeholder="角色名称" clearable width="80%" v-model="updateData.RoleName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-button icon="el-icon-search" type="warning" size="medium" style="width:100px;margin-left:20px" @click="GetUpAuditRuleDetail()">确认修改</el-button>
                </el-row>
            </el-form>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        name: "RightManage",
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created() {

        },
        data() {
            return {
                AddAuditRuleShow: false,
                UpAuditRuleShow: false,
                DataPermissionsShow: false,
                filterText: '',
                tableData: [],
                txtname: '',
                AddRuleName: '',
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 0
                },
                updateData: {
                    Id: 0,
                    RoleName: '',
                    RoleDuty: '',
                },
                GetDataPermissionsDB: {},
                //树状图开始
                treeData: [],
                defaultProps: {
                    children: 'children',
                    label: 'name',
                },

                //保存方法
                //树状图结束
            }
        },
        methods: {
            getCheckedKeys() {
                console.log(this.GetDataPermissionsDB);
                var number = this.$refs.tree.getCheckedKeys().join(',');

                console.log(this.GetDataPermissionsDB.RoleNumber)
                console.log(number);
                this.GetDataPermissionsDB.RoleNumber = number.toString();
              this.$http.post("/Right/UpdateRole", { rolestr: this.GetDataPermissionsDB}).then(res => {
                  if (res.data.succeed) {
                      this.$message.success("角色名称" + this.GetDataPermissionsDB.RoleName+"修改成功");
                  }
              });
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.Name.indexOf(value) != -1;
            },
            GettableData() {
                const Loading = this.openLoading();
                this.$http.post("/Right/RightManage", { txtname: this.txtname }).then(res => {
                    this.tableData = res.data.roles;
                    Loading.close();
                });
            },
            btnAddDepartment() {
                this.AddAuditRuleShow = true;
            },

            GetTreetable() {
                this.$http.get("/Right/GetInitDatale").then(res => {
                    this.treeData = res.data.DicData;
                    console.log(this.treeData);
                });
            },

            GetAddAuditRuleDetail() {
                this.$http.post("/Right/AddRole", { name: this.AddRuleName, duty: '' }).then(res => {
                    if (res.data.mes.IsSuccess) {
                        this.$message.success(res.data.mes.Msg);
                        this.AddAuditRuleShow = false;
                        this.AddRuleName = '';
                        this.GettableData();
                    } else {
                        this.$message.error(res.data.mes.Msg);

                    }
                });
            },
            GetUpAuditRuleDetail(obj) {
                this.$http.post("/Right/UpdateRoleName", { role: this.updateData }).then(res => {
                    if (res.data.mes.IsSuccess) {
                        this.$message.success(res.data.mes.Msg);
                        this.UpAuditRuleShow = false;
                        this.GettableData();
                    } else {
                        this.$message.error(res.data.mes.Msg);
                    }
                });
            },
            Update_RoleName(obj) {
                this.UpAuditRuleShow = true;
                this.updateData = obj;
            },
            Delete_RoleName(obj) {
                this.$confirm('你确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(res => {
                    this.$http.get("/Right/DelRole?Id=" + obj.Id).then(res => {
                        if (res.data.mes.IsSuccess) {
                            this.$message.success(res.data.mes.Msg);
                            this.GettableData();
                        } else {
                            this.$message.error(res.data.mes.Msg);
                        }
                    });
                })
            },
            GetDataPermissions(obj) {
                this.GetDataPermissionsDB = obj;
                console.log(this.GetDataPermissionsDB);
                var strarray = obj.RoleNumber.split(',');
                this.$refs.tree.setCheckedKeys(strarray);
            },
        },
        mounted: function () {
            this.GettableData();
            this.GetTreetable();
        },
    }
</script>
